<template>
<view class="tool">
	<view class="tools">	
		<view>
			<view @tap="toCart">
				<image src="/static/shop_outline.png"></image>
				<text>{{ carLen }}</text>
				购物车
			</view>
			<view @tap="collect" v-if="shop.type === 5">
				<image :src="src"></image>
				收藏
			</view>
			<view @tap="call" v-if="shop.type === 1">
				<view class="phone text-gray icon-phone"></view>
				拨号
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<wx-auth :type="1" v-if="!userInfo" :link="{link: true}"></wx-auth>
		<!-- #endif -->					
		<view>
			<block v-if="active.is_privilege !== 2">
				<view @tap="$bus.emit('showProps', 0)">加入购物车</view>			
				<view @tap="$bus.emit('showProps', 1)">立即购买</view>
			</block>
			<block v-else>
				<view class="special">您没有特权购买此商品</view>
			</block>
		</view>
		
	</view>	
</view>
</template>

<script>
	import { delCollect } from '@/common/api/users'
	import { mapGetters } from 'vuex'
	export default {
		props: {
			ProInfo: Object,
			active: Object,
			shopInfo: Object
		},
		data() {
			return {
				state: 0,
				carList: uni.getStorageSync('ShopCart') || []
			}
		},
		destroyed() {
			this.$bus.off('close')
			this.$bus.off('cartList')
		},
		created() {
			this.state = this.ProInfo.collect
			this.$bus.on('close', () => {
				this.$emit('on-attr', { show: false, type: 0 })
			})
			this.$bus.on('cartList', list => {
				this.carList = list
			})
		},
		computed: {
			src() {
				return !this.state ? '/static/collect.png' : '/static/collect_act.png'
			},
			...mapGetters([
				'userInfo',
				'shop'
			]),
			carLen () {
				if (this.shop.type === 5) {
					return this.carList.reduce((total, item) => total + item.rcount, 0)
				} else if (this.shop.type === 1) {
					const list = this.carList.reduce((total, item) => total.concat(item.list), [])
					return list.reduce((total, item) => total + item.rcount, 0)
				}
			}
		},
		methods: {
			call () {
				uni.makePhoneCall({
					phoneNumber: this.shopInfo.username
				})
			},
			collect () {
				if (this.userInfo) {
					delCollect({ ticket: this.userInfo.ticket || '', customer_id: this.shop.customer_id, user_id: this.userInfo.id || '', product_id: this.ProInfo.id, is_collet: this.state ? 0 : 1 }).then(res => {
						if (res.status) {
							this.state ? this.state = 0 : this.state = 1
							uni.showToast({
								title: res.msg
							})
						}
					})					
				} else {
					uni.navigateTo({ url: '/pages/login/index' })
				}
			},
			toCart () { // 购物车
				uni.switchTab({ url: '/pages/tabBar/shopcart/index' })
			}
		}
	}
</script>

<style lang="less" scoped>
@import '../../../common/styles/variables.less';	
.tool {
	height: 100upx;	
	.tools {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 92upx;
		background-color:white;
		right: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		& > view {
			height: 100%;
			&:first-of-type { 
				flex: 1;
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 & > view {
					 flex: 1;
					 height: 100%;
					 display: flex;
					 flex-direction: column;
					 text-align: center;
					 justify-content: flex-end;
					 align-items: center;
					 color:@gray;
					 font-size: @minSize;					 
					 position: relative;
					 view {
						 font-size: 44upx;
					 }
					 image {
						 width: 45upx;
						 height: 45upx;
						 display:block;
					 }
					 text {
						 position: absolute;
						 color: @red;
						 top: 0;
						 right: 0;
						 border: 1px solid @red;
						 display: block;
						 font-size:@minSize;
						 padding: 0 10upx;
						 z-index: 99;
						 border-radius: 15upx;
						 transform: scale(.7)
					 }
				 }
			}
			&:last-of-type {
				width: 70%;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 100%;
				& > view {
					height: 100%;
					color:white;
					font-size: @medium;
					flex:1;
					display: flex;
					align-items: center;
					justify-content: center;				
					&:first-of-type { background-color: #ff9600; color:#333 }
					&:last-of-type { background-color: @red }
					&.special {
						background-color: #f0c532;
						color:#333
					}
				}
			 }
		}
	}	
}

</style>
